<template>
  <div class="safety-management">
    <!-- 页眉 -->
    <el-row class="page-header">
      <el-col :span="24" class="header-container">
        <div class="page-title">组织机构 - 安全生产</div>
        <div class="user-actions">
          <el-button type="success" icon="plus" @click="openAddDialog">添加管理文件</el-button>
        </div>
      </el-col>
    </el-row>

    <!-- 管理文件表格 -->
    <el-table :data="files" border style="width: 100%">
      <el-table-column prop="stype" label="文件类型" align="center" />
      <el-table-column prop="sname" label="名称" align="center" />
      <el-table-column prop="snumber" label="编号" align="center" />
      <el-table-column prop="file" label="文件" align="center" />
      <el-table-column label="操作" align="center" width="150">
        <template #default="{ row }">
          <el-button type="text" size="small" icon="edit" @click="openEditDialog(row)">
            编辑
          </el-button>
          <el-button type="text" size="small" icon="view" @click="openViewDialog(row)">
            查看
          </el-button>
          <el-button type="text" size="small" icon="delete" @click="deleteFile(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加文件弹窗 -->
    <el-dialog v-model="addDialogVisible" title="添加管理文件" width="50%">
      <el-form ref="addFormRef" :model="form" label-width="100px" :rules="addFormRules">
        <el-form-item label="类型" prop="stype">
          <el-checkbox-group v-model="form.stype">
            <el-checkbox label="SMP" />
            <el-checkbox label="SOP" />
            <el-checkbox label="SOR" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="名称" prop="sname">
          <el-input v-model="form.sname" placeholder="请输入文件名称" />
          <template #error>
            <div class="custom-error-message">{{ addFormRules.sname[0].message }}</div>
          </template>
        </el-form-item>
        <el-form-item label="编号" prop="snumber">
          <el-input v-model="form.snumber" placeholder="请输入编号" />
          <template #error>
            <div class="custom-error-message">{{ addFormRules.snumber[0].message }}</div>
          </template>
        </el-form-item>
        <el-form-item label="文件">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleFileUpload"
            :on-error="handleFileUploadError"
            accept=".pdf,.docx"
            :before-upload="beforeFileUpload"
          >
            <el-button type="primary" icon="upload">上传文件</el-button>
          </el-upload>
          <span v-if="form.file">{{ form.file }}</span>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-success="handleImageUpload"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </template>
    </el-dialog>

    <!-- 编辑文件弹窗 -->
    <el-dialog v-model="editDialogVisible" title="编辑管理文件" width="50%">
      <el-form ref="editFormRef" :model="editForm" label-width="100px" :rules="editFormRules">
        <el-form-item label="类型" prop="stype">
          <el-checkbox-group v-model="editForm.stype">
            <el-checkbox label="SMP" />
            <el-checkbox label="SOP" />
            <el-checkbox label="SOR" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="名称" prop="sname">
          <el-input v-model="editForm.sname" placeholder="请输入文件名称" />
          <template #error>
            <div class="custom-error-message">{{ editFormRules.sname[0].message }}</div>
          </template>
        </el-form-item>
        <el-form-item label="编号" prop="snumber">
          <el-input v-model="editForm.snumber" placeholder="请输入编号" />
          <template #error>
            <div class="custom-error-message">{{ editFormRules.snumber[0].message }}</div>
          </template>
        </el-form-item>
        <el-form-item label="文件">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleEditFileUpload"
            :on-error="handleEditFileUploadError"
            accept=".pdf,.docx"
            :before-upload="beforeFileUpload"
          >
            <el-button type="primary" icon="upload">上传文件</el-button>
          </el-upload>
          <span v-if="editForm.file">{{ editForm.file }}</span>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-success="handleEditImageUpload"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEditSubmit">保存</el-button>
      </template>
    </el-dialog>

    <!-- 查看文件弹窗 -->
    <el-dialog v-model="viewDialogVisible" title="文件详情">
      <div>
        <p>
          <strong>文件类型：</strong>
          {{ viewForm.stype }}
        </p>
        <p>
          <strong>文件名称：</strong>
          {{ viewForm.sname }}
        </p>
        <p>
          <strong>文件编号：</strong>
          {{ viewForm.snumber }}
        </p>
        <p>
          <strong>文件：</strong>
          {{ viewForm.file }}
        </p>
      </div>
      <template #footer>
        <el-button @click="viewDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import axios from "axios";
import request from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";

// 数据
const files = ref([
  {
    stype: "SMP",
    sname: "安全生产管理制度",
    snumber: "SMP-GACP-AQSC 001 v1.0",
    file: "SMP-GACP-AQSC.pdf",
  },
  {
    stype: "SMP",
    sname: "生产管理规程",
    snumber: "SMP-GACP-SCGL 002 v1.0",
    file: "SMP-GACP-SCGL.pdf",
  },
]);

// 表单数据
interface FormRule {
  required: boolean;
  message: string;
  trigger: string;
}

const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB

// 添加文件表单验证规则
const addFormRules = reactive({
  stype: [
    {
      required: false,
      message: "",
      trigger: "change",
    },
  ],
  sname: [
    {
      required: false,
      message: "",
      trigger: "blur",
    },
  ],
  snumber: [
    {
      required: false,
      message: "",
      trigger: "blur",
    },
  ],
});

// 编辑文件表单验证规则
const editFormRules = reactive({
  stype: [
    {
      required: true,
      message: "请至少选择一种文件类型",
      trigger: "change",
    },
  ],
  sname: [
    {
      required: true,
      message: "请输入文件名称",
      trigger: "blur",
    },
  ],
  snumber: [
    {
      required: true,
      message: "请输入文件编号",
      trigger: "blur",
    },
  ],
});

// 添加弹窗
const addDialogVisible = ref(false);
const form = reactive({
  stype: [],
  sname: "",
  snumber: "",
  file: "",
});
const handleSubmit = () => {
  console.log("保存添加的文件:", form);
  addDialogVisible.value = false;
};

// 编辑弹窗
const editDialogVisible = ref(false);
const editForm = reactive({
  stype: [],
  sname: "",
  snumber: "",
  file: "",
});
const handleEditSubmit = () => {
  console.log("保存编辑的文件:", editForm);
  editDialogVisible.value = false;
};

// 查看弹窗
const viewDialogVisible = ref(false);
const viewForm = reactive({
  stype: "",
  sname: "",
  snumber: "",
  file: "",
});
const openViewDialog = (row: any) => {
  viewForm.stype = row.stype;
  viewForm.sname = row.sname;
  viewForm.snumber = row.snumber;
  viewForm.file = row.file;
  viewDialogVisible.value = true;
};

// 添加文件
const openAddDialog = () => {
  form.stype = [];
  form.sname = "";
  form.snumber = "";
  form.file = "";
  addDialogVisible.value = true;
};

// 编辑文件
const openEditDialog = (row: any) => {
  editForm.stype = row.stype;
  editForm.sname = row.sname;
  editForm.snumber = row.snumber;
  editForm.file = row.file;
  editDialogVisible.value = true;
};

// 删除文件
const deleteFile = (row: any) => {
  ElMessageBox.confirm("确认删除该文件?", "删除文件", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
  })
    .then(() => {
      const index = files.value.indexOf(row);
      if (index !== -1) {
        files.value.splice(index, 1);
        ElMessage.success("文件已删除");
      }
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

// 文件上传处理函数
const handleFileUpload = (response: any, file: any) => {
  form.file = file.name;
};

const handleFileUploadError = (error: any) => {
  ElMessage.error("文件上传失败");
};

// 图片上传处理函数
const handleImageUpload = (response: any, file: any) => {
  console.log("上传图片成功:", file);
};

const beforeFileUpload = (file: any) => {
  const isPDF = file.type === "application/pdf";
  const isDocx = file.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
  if (!isPDF && !isDocx) {
    ElMessage.error("上传文件只能是 PDF 或 DOCX 格式");
    return false;
  }
  if (file.size > MAX_FILE_SIZE) {
    ElMessage.error("文件大小不能超过 10MB");
    return false;
  }
  return true;
};
</script>
<style scoped>
.safety-management {
  padding: 20px;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page-title {
  font-size: 20px;
  font-weight: bold;
  color: #4caf50;
}
.el-upload {
  display: block;
}
.custom-error-message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}
</style>
